<template>
  <div class="app-container">
 
    <el-form ref="form" label-width="100px">
  <el-form-item label="资产类别：">
  <el-cascader
    v-model="optiontype"
    :options="options"
    :key="isResouceShow"
    :props="{ checkStrictly: true }"
    :show-all-levels="false"
    @change="handleChange"
    clearable></el-cascader>
  </el-form-item>
  </el-form>


      <el-tabs   v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(tab_v, tab_k) in tab_pane" :key="tab_v" :label="tab_k" :name="tab_v.toString()">
        <el-form v-for="(item, index) in form_data" :key="index" size="small" :inline="false" label-width="100px" label-position="top">
          <el-col :span="4" style="margin-right:20px">
            <el-form-item   :required="item.required" :label="item.alias"   >
              <div v-if="item.name === 'room'">
                    <el-select v-model="post_data[field_mapping[tab_v]][item.name]" placeholder="请选择">
    <el-option
      v-for="item in room"
      :key="item.id"
      :label="item.name"
      :value="item.name">
    </el-option>
  </el-select>
              </div>
                                          <div v-else-if="(item.is_multi) == true">
                                              <el-button @click="handleMulti(item,index,tab_v)" plain   style="width: 100%" >添加子属性</el-button>
              </div>
                            <div v-else-if="item.name === 'cabinet'">
                    <el-select v-model="post_data[field_mapping[tab_v]][item.name]" placeholder="请选择">
    <el-option
      v-for="item in cabinet"
      :key="item.id"
      :label="item.name"
      :value="item.name">
    </el-option>
  </el-select>
              </div>
                                          <div v-else-if="item.name === 'supplier'">
                    <el-select v-model="post_data[field_mapping[tab_v]][item.name]" placeholder="请选择">
    <el-option
      v-for="item in supplier"
      :key="item.id"
      :label="item.name"
      :value="item.name">
    </el-option>
  </el-select>
              </div>
                                          <div v-else-if="item.name === 'audit'">
                    <el-select v-model="post_data[field_mapping[tab_v]][item.name]" placeholder="请选择">
    <el-option
      v-for="item in auditstatus"
      :key="item.id"
      :label="item.status"
      :value="item.status">
    </el-option>
  </el-select>
              </div>
                                                        <div v-else-if="item.name === 'online'">
                    <el-select v-model="post_data[field_mapping[tab_v]][item.name]" placeholder="请选择">
    <el-option
      v-for="item in online"
      :key="item.id"
      :label="item.status"
      :value="item.status">
    </el-option>
  </el-select>
              </div>
                  <div v-else>

              <el-input v-model="post_data[field_mapping[tab_v]][item.name]" placeholder="请输入内容" :disabled="is_lock"></el-input>
                  </div>

            </el-form-item>
          </el-col>
        </el-form>
        </el-tab-pane>
      </el-tabs>
            <center>
      <el-form label-width="0px" style="margin-right: 30px align:center">
      <el-form-item>
        <el-button size="small" style="width: 10%" type="primary" @click="on_submit()">提交</el-button>
        <el-button size="small" style="width: 10%" type="info"  @click="on_close()" >取消</el-button>
      </el-form-item>
    </el-form>
    </center>
      <el-dialog   :visible.sync="is_visible" @close='closeDialog' >


<el-table
        :data="form_tableData"
        border
        >
        <!-- 自定义列的遍历-->
       <el-table-column v-for="(value,col, index) in form_tableData[0]" :prop="col.name" :label="col" >
          <!-- 数据的遍历  scope.row就代表数据的每一个对象-->
          <template slot-scope="scope">
                        <el-input v-model="scope.row[col]" placeholder="请输入内容" clearable></el-input>

          </template>
        </el-table-column> 
                <el-table-column label="操作" width="300px" >
          <!-- 数据的遍历  scope.row就代表数据的每一个对象-->
          <template slot-scope="scope">
            <el-button raw-type="button" @click="addCol()">
  添加列
</el-button>
                <el-button raw-type="button" @click="addLine()">
                  添加行
                </el-button>
                                <el-button raw-type="button" @click="delLine(scope)">
                  删除行
                </el-button>
          </template>
        </el-table-column>
    </el-table>
    <el-form :inline="true" :model="ColInfo" class="demo-form-inline">

</el-form>

</el-dialog>
<el-dialog :visible.sync="col_visible">
<el-form>
    <el-form-item label="列名称">
    <el-input v-model="ColInfo.name" placeholder="列名称"></el-input>
                                    <el-button raw-type="button" @click="confirm()">
                  确定
                </el-button>
  </el-form-item>
</el-form>
</el-dialog>
  </div>
</template>

<script>
import { addField, delField, listField,listTree } from "@/api/vadmin/cmdb/table";
import { listCabin,listRoom } from "@/api/vadmin/cmdb/roomcabin";
import { listName } from "@/api/vadmin/cmdb/supplier";
import { listStatus } from "@/api/vadmin/cmdb/status";
import Vue from 'vue'


import { listMapping } from "@/api/vadmin/cmdb/mapping";

import { listData,addData } from "@/api/vadmin/cmdb/data"
export default {
  name: "AddDATA",
  components: {},
  data() {
    return {
      ColInfo:{"name":""},
      col_visible:false,
      dialogTableVisible:false,
      is_visible: false,
      loading: false,
      form_data: {0:[],1:[]},
      field_data: {fields:[]},
      post_data:{jb:{},sy:{},ht:{}},
      data: {},
      errors: {},
      activeName: 0,
      is_lock:false,
      options:[],
      optiontype:"",
      isResouceShow:0,
      room:[],
      cabinet:[],
      supplier:[],
      online:[],
      auditstatus:[],
      curr_item:{},
      curr_tab:"jb",
      table: "",
      field_mapping:{jb:{},sy:{},ht:{}},
      tab_pane: {
        基本属性: 0,
        私有属性: 1,
      },
      tableData:[],
      
          form_tableData: [{
            name: '',
          }],
          cols: [
        {prop: 'name', label: '名称'},
      ]
    };
  },

  mounted(){
    this.GetBaseInfo()
  },
  created() {
    this.field_mapping=this.$store.state.cmdb.Field_Mapping;
          listTree().then((response) => {
        this.tree_data=response
        this.options=response[0].children
        this.table=response[0].children[0].id
        this.handleClick()

      })
      
  },
  methods: {
    GetBaseInfo(){
      listCabin().then(response=>{
        this.cabinet=response.results
      })
      listRoom().then(response=>{
        this.room=response.results
      })
      listName().then(response=>{
        this.supplier=response.results
      })
      listStatus({pid:2}).then(response=>{
        this.online=response.results
      })
            listStatus({pid:1}).then(response=>{
        this.auditstatus=response.results
      })
    },
    handleClose() {
      this.is_visible = false;
      this.data = false;
      this.$emit("listenChileEvent", 1);
    },
        handleMulti(item,index,tab_v) {
          console.log(tab_v)
          if (this.post_data[this.field_mapping[tab_v]][item.name]==undefined){
                      this.is_visible=true
          this.curr_tab=this.field_mapping[tab_v]
          this.curr_item=item
          this.form_data[index].is_deleted=true
          }else{
            console.log("当前item值：",item.name)
                      this.curr_item=item

            console.log(this.post_data)
            console.log("已经存在值，进行输出：",this.post_data[this.field_mapping[tab_v]][item.name])
            console.log("form_tableData",this.form_tableData)
            console.log("ITEM",item)
            this.form_tableData=this.post_data[this.field_mapping[tab_v]][item.name]
                                  this.is_visible=true
          }

    },
    handleClick() {
      this.field_data= {fields:[]}
      console.log(this.activeName)
      listField({attr:this.activeName,table:this.table}).then((response)=>{
        this.form_data=response.results
        console.log(this.form_data)
      })
    },

    on_submit(){
            console.log(this.post_data)

      this.post_data["name"]=this.table;
      addData({id:null,data:this.post_data}).then(response=>{
          this.is_visible=false;
          this.$emit("listenChileEvent") 
          this.msgSuccess("创建成功");
      })
    },
    on_close(){
      this.is_visible=false;
    },
    handleChange(val){
      var table_id =0
      if (val.length >1){
        table_id=this.optiontype[this.optiontype.length -1 ]
      }else{
        table_id=this.optiontype[0]
      }
      this.table=table_id
      this.handleClick()
    },

    addCol(){
      this.col_visible=true;

  },
  confirm(){
      this.col_visible=false
      this.tableData=this.form_tableData
        this.form_tableData.forEach((item,index)=>{
          var name =this.ColInfo.name
  Vue.set(item,name,'')
        });
            this.cols.push({prop: this.ColInfo.name})
  },
  addLine(){
    this.form_tableData.push(JSON.parse(JSON.stringify(this.form_tableData[0])))
  },
  delLine(data){
       this.form_tableData.splice(data.$index, 1);

  },
  closeDialog(){
    console.log("窗口关闭事件")
    //添加到post数据中
  // Vue.set( this.post_data[this.curr_tab],this.curr_item.name,[{"aaa":""}])
    this.post_data[this.curr_tab][this.curr_item.name]=JSON.parse(JSON.stringify(this.form_tableData))
    //清理数据
    console.log(this.post_data)
    this.form_tableData=[{name: '',}]
    this.ColInfo={"name":""}
    this.cols=[{prop: 'name', label: '名称'}]
  }
  }
};
</script>

<style scoped>
</style>
